<template>
  <div>
    <el-breadcrumb separator-class="el-icon-arrow-right">
      <el-breadcrumb-item :to="{ path: '/index' }">首页</el-breadcrumb-item>
      <el-breadcrumb-item :to="{ path: '/order' }">订单管理</el-breadcrumb-item>
      <el-breadcrumb-item>订单详情</el-breadcrumb-item>
    </el-breadcrumb>
    <!-- 主体内容	 -->
    <el-card>
      <!-- 搜索区域 -->
      <el-row>
        <el-col :span="6">
          <el-input
              placeholder="请输入用户账号"
              class="input-with-select"
              v-model="queryInfo.byname"
              clearable
              @clear="getOrderList"
          >
            <el-button slot="append" icon="el-icon-search" @click="serarch"></el-button>
          </el-input>
        </el-col>
      </el-row>

      <!-- 表格 -->
      <el-table :data="orderList" border style="width: 100%">
        <el-table-column type="index" label="编号" > </el-table-column>
        <el-table-column prop="outTradeNo" label="订单编号" ></el-table-column>
        <el-table-column prop="createTime"  label="提交时间" > </el-table-column>
        <el-table-column prop="videoTitle" label="视频名称" > </el-table-column>
        <el-table-column label="视频封面" width="110" prop="videoImg">
          <template slot-scope="scope">
            <img :src="scope.row.videoImg" style="height: 60px" />
          </template>
        </el-table-column>
        <el-table-column prop="name" label="用户账号" > </el-table-column>
        <el-table-column prop="phone" label="联系方式" > </el-table-column>
        <el-table-column prop="totalFee" label="订单金额" > </el-table-column>


        <el-table-column label="操作" >
          <template slot-scope="scope">
            <el-tooltip
                class="item"
                effect="dark"
                content="删除"
                placement="top"
            >
              <el-button
                  type="danger"
                  icon="el-icon-delete"
                  size="mini"
                  @click="removeOrder(scope.row.id)"
              ></el-button>
            </el-tooltip>
          </template>
        </el-table-column>
      </el-table>
      <!-- 分页功能 -->
      <el-pagination
          align="left"
          @size-change="SizeChange"
          @current-change="CurrentChange"
          :current-page="queryInfo.pagenum"
          :page-sizes="[1, 2, 3, 4]"
          :page-size="queryInfo.pagesize"
          layout="total, sizes, prev, pager, next, jumper"
          :total="total"
      >
      </el-pagination>
    </el-card>
  </div>
</template>

<script>
export default {
  data() {
    return {
      //用户列表
      orderList: [],
      videoImg: [],
      queryInfo: {
        byname: "",
        pagenum: 1,
        pagesize: 4,
      },
      total: 0,
    };
  },
  methods: {
    //请求订单列表
    getOrderList() {
      this.$http.get("api/v1/pri/order/listOrder", {
            params: this.queryInfo
          })
          .then((res) => {
            console.log(res);
            if (res.status != 200) {
              return this.$message.error("获取订单列表失败");
            } else {
              this.$message.success("获取订单列表成功");
              this.orderList = res.data.list;
              this.total = res.data.total;
              for (let i = 0; i < this.orderList.length; i++) {
                this.videoImg[i] = this.orderList[i].videoImg;
              }
            }
          });
    },
    //每页数据条数改变时触发
    SizeChange(newval) {
      this.queryInfo.pagesize = newval;
      this.getOrderList();
    },
    //当前页面改变时触发
    CurrentChange(newval) {
      this.queryInfo.pagenum = newval;
      this.getOrderList();
    },
    //查詢
    serarch(){
      this.getOrderList()
    },
    //删除订单
    removeOrder(id) {
      this.$http.delete(`api/v1/pri/order/${id}`).then((res) => {
        console.log("========================================");
        console.log(res + "--------------------------------------");
        //刷新列表
        this.getOrderList();
      });
    },
  },
  mounted() {
    this.getOrderList();
  },
};
</script>

<style>
</style>